<template>
  <div style="width: 100%; position: relative; margin-bottom: 10px">
    <el-form class="formData" size="mini" :model="formData" label-width="130px">
      <el-col span="12">
        <el-form-item label="服务名称" prop="jobGroup">
          <el-select v-model="formData.jobGroup" @change="changeService">
            <el-option label="全部" value="0"></el-option>
            <el-option
              v-for="item in serverList"
              :key="item.id"
              :label="item.appname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col span="12">
        <el-form-item label="任务" prop="jobId">
          <el-select v-model="formData.jobId">
            <el-option label="全部" value="0"></el-option>
            <el-option
              v-for="item in taskList"
              :key="item.id"
              :label="item.jobDesc"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col span="12">
        <el-form-item label="状态" prop="triggerStatus">
          <el-select v-model="formData.triggerStatus">
            <el-option label="全部" value="-1"></el-option>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col span="12">
        <el-form-item label="调度时间" prop="filterTime">
          <el-date-picker
            v-model="formData.filterTime"
            value-format="yyyy-MM-dd 00:00:00"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-form>
    <div class="searchBtn">
      <div>
        <el-button
          size="mini"
          type="primary"
          @click="$emit('searchClick', formData)"
          >筛选</el-button
        >
        <el-button size="mini" @click="restFormData">重置</el-button>
        <el-button size="mini" type="primary" @click="cleanSow"
          >清理
        </el-button>
      </div>
    </div>
    <el-dialog
      title="日志清理"
      destroy-on-close
      :append-to-body="true"
      :visible.sync="visible"
      width="500px"
    >
      <div>
        <el-form :model="clearForm" ref="triggerForm" label-width="140px">
          <el-form-item label="服务名称：" prop="jobGroup">
            <el-col :span="20">
              <el-select v-model="clearForm.jobGroup" disabled>
                <el-option label="全部" value="0"></el-option>
                <el-option
                  v-for="item in serverList"
                  :key="item.id"
                  :label="item.appname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="任务：">
            <el-col :span="20">
              <el-select v-model="clearForm.jobId" disabled>
                <el-option label="全部" value="0"></el-option>
                <el-option
                  v-for="item in taskList"
                  :key="item.id"
                  :label="item.jobDesc"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="清理方式：">
            <el-col :span="20">
              <el-select v-model="clearForm.type">
                <el-option
                  v-for="item in clearMethod"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="saveClean">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as taskManageApi from "@/api/taskManage/taskManage";

export default {
  name: "dispatchSearch",
  props: {
    initData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      visible: false,
      formData: {
        jobId: "0",
        jobGroup: "0",
        triggerStatus: "-1",
      },
      clearForm: {},
      serverList: [],
      taskList: [],
      formLabelWidth: 150,
      statusList: [
        {
          value: 1,
          label: "成功",
        },
        {
          value: 2,
          label: "失败",
        },
        {
          value: 3,
          label: "进行中",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      clearMethod: [
        {
          label: "清理一个月之前日志数据",
          value: 1,
        },
        {
          label: "清理三个月之前日志数据",
          value: 2,
        },
        {
          label: "清理六个月之前日志数据",
          value: 3,
        },
        {
          label: "清理一年之前日志数据",
          value: 4,
        },
        {
          label: "清理一千条以前日志数据",
          value: 5,
        },
        {
          label: "清理一万条以前日志数据",
          value: 6,
        },
        {
          label: "清理三万条以前日志数据",
          value: 7,
        },
        {
          label: "清理十万条以前日志数据",
          value: 8,
        },
        {
          label: "清理所有日志数据",
          value: 9,
        },
      ],
    };
  },
  methods: {
    saveClean() {
      const { jobGroup = 0, jobId = 0, type = 1 } = this.clearForm;
      taskManageApi
        .clearLog({ jobGroup, jobId, type: Number(type) })
        .then((res) => {
          this.$message.success("清除成功！");
          this.$emit("searchClick", this.formData);
          this.visible = false;
        });
    },
    cleanSow() {
      this.clearForm = { ...this.formData, type: 1 };
      this.visible = true;
    },
    getServiceList() {
      taskManageApi.getServiceList().then((res) => {
        this.serverList = res.data.data;
      });
    },
    getTaskList(id) {
      taskManageApi.getJobsByGroup({ jobGroup: id }).then((res) => {
        this.taskList = res.data.content;
      });
    },
    changeService(value) {
      this.getTaskList(value);
    },
    restFormData() {
      this.formData = {};
      this.$emit("searchClick", {});
    },
  },
  watch: {
    "$route.query": {
      handler(val) {
        if (val) {
          const { jobGroup, jobId } = val;
          if (jobGroup && jobId) {
            this.changeService(jobGroup);
            this.formData = {
              ...this.formData,
              jobId,
              jobGroup,
            };
            this.$emit("searchClick", this.formData);
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.getServiceList();
  },
};
</script>

<style scoped lang="scss">
.open_close {
  font-size: 13px;
  cursor: pointer;
  text-align: right;
}

.search-enter-active,
.search-leave-active {
  transition: all 0.4s;
}

.search-enter,
.search-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

.formData {
  width: 70%;
  height: auto;
  margin: auto;
  padding-left: -130px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;

  ::v-deep .el-col {
    .el-form-item {
      .el-form-item__label {
        font-size: 13px;
      }
      .el-date-editor--daterange.el-input__inner {
        width: 250px;
      }
      .el-form-item__content {
        font-size: 12px;

        .el-radio-group {
          font-size: 12px;

          .el-radio {
            .el-radio__label {
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  .el-form-item {
    margin-bottom: 0;
  }
}

.searchBtn {
  min-width: 150px;
  position: absolute;
  //bottom: 17%;
  height: 100%;
  bottom: 0;
  right: 2%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 8px;
}
</style>

